import { useState } from "react";

import Logo from "./Logo";
import { Link } from "react-router-dom";
import Search from "./Search";
import Button from "./Button";
import Inform from "./user/Inform";
import Advator from "./user/Advator";

const Navbar = ()=>{
    const [isLogin,setIsLogin] = useState<boolean>(false)
    const handleLogin = () => {
        console.log("clicked");
    };
    return (
        <>  <div className="w-full h-16 mx-auto opacity-85">
                <div 
                    className="w-full
                            h-16 
                            z-10
                            flex
                            justify-space-between 
                            items-center
                            bg-white/75
                            fixed
                            pl-20
                            pr-10">
                         <div className="">
                              <Link to="/">
                                   <Logo/>
                                </Link>
                         </div>
                        <div className="flex 
                                    justify-start flex-1
                                    item-center
                                    text-stone-600
                                    text-base">
                            <ul className="flex justity-center items-center gap-4">
                                <li className="px-2 py-1 w-70 h-30 rounded hover:text-stone-800 transition"><Link to="/">首页</Link></li>
                                <li className="px-2 py-1 w-70 h-30 rounded hover:text-stone-800 transition"><Link to="/community">社区</Link></li>
                                <li className="px-2 py-1 w-70 h-30 rounded hover:text-stone-800 transition"><Link to="/question">问答</Link></li>
                                <li className="px-2 py-1 w-70 h-30 rounded hover:text-stone-800 transition"><Link to="/activity">活动</Link></li>
                                <li className="px-2 py-1 w-70 h-30 rounded hover:text-stone-800 transition"><Link to="/suggestion">个性化推荐</Link></li>
                                <li className="px-2 py-1 w-70 h-30 rounded hover:text-stone-800 transition"><Link to="/news">资讯</Link></li>
                            </ul>
                        </div>
                        <div className="flex justify-center items-center mr-10">
                            <div className="mx-4">
                                <Search/>
                            </div>
                            {/* TODO 搜索 登陆 */}
                            <div className="flex justify-center items-center">
                                {isLogin ? <div>
                                            < Inform/>
                                            <Advator/>
                                            </div>
                                         :<Button label="登录/注册" onClick={()=>{}}/>
                                }
                            </div>
                        </div>
                    </div>
                </div>
        </>
    );
}
export default Navbar;